<template>
	<s-layout title="退款详情">
		<view class="info ss-p-t-50 ss-p-x-30 ss-p-b-30">
			<view class="refund-logo"></view>
			<view class="store-name ss-m-t-20">店铺名称</view>
			<view class="refund-money ss-m-t-15">+￥30</view>
			<view class="refund-status ss-m-t-15">退款中</view>
			<view class="order ss-flex justify-between align-center ss-m-t-30 ss-p-b-30">
				<view class="left">关联记录</view>
				<view class="go-info ss-flex justify-end align-center">
					<view class="go-text" style="color: #363636;">查看原账单</view>
					<uni-icons type="right" size="16" color="#363636"></uni-icons>
				</view>
			</view>
			<view class="info-item ss-flex justify-between align-center ss-m-b-25 ss-m-t-30">
				<view class="info-label">申请退款金额</view>
				<view class="info-content">30</view>
			</view>
			<view class="info-item ss-flex justify-between align-center ss-m-b-25">
				<view class="info-label">退款至</view>
				<view class="info-content">支付宝</view>
			</view>
			<view class="info-item ss-flex justify-between align-center ss-m-b-25">
				<view class="info-label">退款受理时间</view>
				<view class="info-content">2024-10-15 09:00:00</view>
			</view>
			<view class="info-item ss-flex justify-between align-center ss-m-b-25">
				<view class="info-label">退款单号</view>
				<view class="info-content">240170003974069346</view>
			</view>
			<view class="info-item ss-flex justify-between align-center">
				<view class="info-label">商家单号</view>
				<view class="info-content">47920032668860825044K5L6001Z22</view>
			</view>
		</view>
		<view class="refund-step ss-p-30">
			<view class="title ss-m-b-30">退款进度</view>
			<uni-steps :options="state.list" active-color="#35C7A8" :active="state.active" direction="column" />
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const state =reactive({
		list:[{
		title: '提交申请',
		desc: '2024-10-30 15:07:12'
	}, {
		title: '提款审核中',
		desc: '2024-10-31 8:00:00'
	}, {
		title: '退款申请通过',
		desc: '2024-10-31 10:02:34'
	}, {
		title: '退款到账成功',
		desc: '2024-10-31 15:23:10'
	}],
	active:2
	})
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.info {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx 24rpx;

		.refund-logo {
			width: 80rpx;
			height: 80rpx;
			margin: 0 auto;
			background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/group/refund-logo.png');
			background-size: cover;
		}

		.store-name {
			font-weight: 400;
			font-size: 32rpx;
			color: #353535;
			text-align: center;
		}

		.refund-money {
			font-weight: 500;
			font-size: 48rpx;
			color: #343434;
			text-align: center;
		}

		.refund-status {
			font-weight: 400;
			font-size: 28rpx;
			color: #9B9B9B;
			text-align: center;
		}

		.order {
			border-bottom: 1rpx solid #D8D8D8;

			.left {
				height: 40rpx;
				line-height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #898989;
			}
		}

		.info-label {
			font-weight: 400;
			font-size: 28rpx;
			color: #898989;
			text-align: left;
		}

		.info-content {
			font-weight: 400;
			font-size: 28rpx;
			color: #363636;
			text-align: right;
		}
	}

	.refund-step {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #282828;
		}
	}

	.go-info {
		.go-text {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #2A2A2A;
		}
	}
</style>